<template>
  <div class="shop">
      <top :title="title"></top>
      <div class="shopList">
        <input type="checkbox" name="shopList" id="shopList">
        <div class="shopListImg">
          <img src="" alt="">
        </div>
        <div class="shopListInfo">
          <div class="shopListTitle">小米Note 16G全网通小米Note 16G全网通小米Note 16G全网通小米Note 16G全网通小米Note 16G全网通</div>
          <div class="shopListNum">
            <span class="shopListPrice">￥1999</span>
            <div class="shopListButton">
              <span class="reduce">-</span>
              <span class="num" disabled>1</span>
              <span class="add">+</span>
              <span class="dle">删除</span>
            </div>
          </div>
        </div>
      </div>
      <div class="shopCount">
        <div class="shopCountTotal">总价<span>￥4999</span></div>
        <mt-button type="primary" size="small">去结算</mt-button>
      </div>
  </div>
</template>

<script>
import Top from "../components/top";
export default {
  name: "Shop",
  components: {
    Top,
  },
  data() {
    return {
      title: "购物车",
    };
  },

}
</script>

<style lang="scss" scoped>
.shop {
  background-color: WhiteSmoke;
  height: calc(100% - 55px);
}
.shopList {
  display: flex;
  height: 70px;
  margin: 10px;
  padding: 20px 10px;
  background-color: white;
  input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin: calc(70px / 2 - 10px) 3px;
    border: none;
  }
}
.shopListImg{
  width: 50px;
  height: 70px;
  background-color: antiquewhite;
  margin: 0 10px;
}
.shopListInfo{
  flex: 1;
  display: flex;
  flex-direction: column;
}
.shopListTitle {
  flex: 1;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.shopListNum{
  box-sizing: border-box;
  height: 26px;
  overflow: hidden;
  display: flex;
}
.shopListPrice {
  flex: 1;
  color: red;
  font-weight: bolder;
}
.shopListButton span{
  display: inline-block;
  width: 36px;
  text-align: center;
}

.reduce {
border: 1px solid black;
}
.num {
border-top: 1px solid black;
border-bottom: 1px solid black;
color: red;
}
.add {
border: 1px solid black;
}
.dle {
  font-size: 14px;
}
.shopCount {
  height: 33px;
  line-height: 33px;
  margin: 10px;
  padding: 20px 10px;
  background-color: white;
  display: flex;
}
.shopCountTotal {
  flex: 1;
  span {
    color: red;
    font-weight: bolder;
  }
}
</style>
